<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>Shopping Cart</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<!-- header -->
<jsp:include page="../head.jsp"/>

<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="shop.html">Shop</a></li>
                        <li><a href="shop.html" class="active">购物车</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->

<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper">
    <div class="container">
        <!-- Cart Page Content Start -->
        <div class="row">
            <div class="col-lg-12">
                <!-- Cart Table Area -->
                <div class="cart-table table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th colspan="2" class="pro-title">商品</th>
                            <th class="pro-price">价格</th>
                            <th class="pro-quantity">数量</th>
                            <th class="pro-subtotal">小计</th>
                            <th class="pro-remove"><a href="javascript:;" onclick="deleteAll()">清空购物车</a></th>
                        </tr>
                        </thead>
                        <tbody>


                        <c:forEach items="${items}" var="item">
                            <tr>
                                <td class="pro-thumbnail">
                                    <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.product.pid}">
                                        <img class="img-fluid" src="${pageContext.request.contextPath}/${item.product.imgs}"
                                             alt="Product"/></a></td>
                                <td class="pro-title"><a
                                        href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.product.pid}">
                                        ${fn:substring(item.product.name,0,10 )}..</a></td>
                                <td class="pro-price"><span>${item.product.shelfPrice}</span></td>
                                <td class="pro-quantity">
                                    <div class="pro-qty">
                                        <input class="pro-count" id="${item.product.pid}" type="number" min="0" max="5" value="${item.count}">
                                    </div>
                                </td>
                                <td class="pro-subtotal"><span class="subtotal">${item.price}</span></td>
                                <td class="pro-remove"><a title="移出" onclick="deletesingle(this,'${item.product.pid}')" href="javascript:;"><i class="fa fa-trash-o"></i></a></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <c:if test="${empty items}">
            <h3 style="text-align: center">购物车是空的，去 <a
                    href="${pageContext.request.contextPath}/product/list.do">看看</a> 吧</h3>
        </c:if>
        <div class="row">
            <div class="col-lg-6 ml-auto">
                <!-- Cart Calculation Area -->
                <div class="cart-calculator-wrapper">
                    <h3>购物车清单</h3>
                    <div class="cart-calculate-items">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tr>
                                    <td>总价</td>
                                    <td>$<span id="total">${total}</span></td>
                                </tr>
                                <tr>
                                    <td>优惠</td>
                                    <td>暂无</td>
                                </tr>
                                <tr>
                                    <td>优惠后总价</td>
                                    <td class="total-amount">$<span id="after-total">
                                        ${total}
                                    </span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                   <c:if test="${not empty items}">
                       <a href="${pageContext.request.contextPath}/car/goCheckoutCart.do" class="btn">结算购物车</a>
                   </c:if>
                </div>
            </div>
        </div>
        <!-- Cart Page Content End -->
    </div>
</div>
<!--== Page Content Wrapper End ==-->

<!--== foot==-->
<jsp:include page="../foot.jsp"/>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->
<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>

<script src="${pageContext.request.contextPath}/static/js/cart/cart.js"></script>
<script src="${pageContext.request.contextPath}/static/js/api/store.js"></script>
<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>
</body>
<%--<script>--%>
    <%--$(".pro-count").keyup(function () {--%>
        <%--var count = $(this);--%>
        <%--var i = count.val()--%>
        <%--var norm = /^[0-9]*$/--%>
        <%--if (count.val() == "") {--%>
            <%--count.val(1)--%>
        <%--}--%>
        <%--if (count.val() < 0) {--%>
            <%--count.val(0);--%>
        <%--}--%>
        <%--if (count.val() > 5) {--%>
            <%--count.val(5)--%>
        <%--}--%>
    <%--})--%>

    <%--$('.pro-count').hover(function () {--%>
        <%--$(".pro-count").mouseup(function () {--%>
            <%--updatasubtotal($(this));--%>
        <%--})--%>
    <%--})--%>

    <%--function updatasubtotal(data) {--%>
        <%--var _this = $(data);--%>
        <%--var count = _this.val();--%>
        <%--var shelfprice = getShelfPrice(_this);--%>
        <%--var subtotal = getOldPrice(_this);--%>
        <%--var oldprice = subtotal.html();--%>
        <%--console.log("商品价格是：" + shelfprice);--%>
        <%--var newprice = shelfprice * count;--%>
        <%--console.log("新的价格是：" + newprice);--%>
        <%--newprice = newprice.toFixed(1);--%>
        <%--subtotal.html(newprice);--%>
        <%--var diffrent = newprice - oldprice;--%>
        <%--updataTotal(diffrent);--%>
    <%--}--%>

    <%--function updataTotal(diff) {--%>
        <%--var total = $("#total").html();--%>
        <%--total = parseFloat(total, 10);--%>
        <%--var newTotal = total + diff;--%>
        <%--newTotal = newTotal.toFixed(1);--%>
        <%--$("#total").html(newTotal);--%>
        <%--$("#after-total").html(newTotal);--%>
    <%--}--%>

    <%--function getOldPrice(data) {--%>
        <%--return $(data).parent().parent().next().children("span");--%>
    <%--}--%>
    <%--function getShelfPrice(data) {--%>
        <%--return $(data).parent().parent().prev().children().html();--%>
    <%--}--%>
<%--</script>--%>
</html>
